<template>
  <div class="serviceManage">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>栏目管理</span>
      </header>
    </div>
    <div class="card_table">
      <!-- 表格头部控件 -->
      <header>
        <!-- 左侧查询控件 -->
        <span>
          <el-cascader
            placeholder="请选择应用"
            class="sel_head"
             size="small"
            :props="{ multiple: true, checkStrictly: true }"
            v-model="table_config.appId"
            :options="app_arr"
            @change="query"
            clearable
          ></el-cascader>
          <el-input
            class="sel_inp"
            size="small"
            clearable
            v-model="table_config.bizName"
            placeholder="请输入内容"
          >
            <template slot="prepend">栏目名称</template>
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </span>
        <!-- 右侧追加控件 -->
        <span>
          <!-- <el-radio v-model="table_size" label="mini">迷你</el-radio>
          <el-radio v-model="table_size" label="small">适中</el-radio>
          <el-radio v-model="table_size" label="medium">大屏</el-radio>-->
          <el-button v-if="$currentRole>1" @click="show_form({}, false)" type="primary" plain size="mini">添加栏目</el-button>
        </span>
      </header>
      <!-- 表体区域 -->
      <section>
        <el-table
          :size="table_size"
          :data="tableData"
          v-loading="table_loading"
          style="width: 100%"
        >
          <el-table-column prop="id" label="栏目ID" width="100"></el-table-column>
          <el-table-column prop="bizName" label="栏目名称" sortable></el-table-column>
          <el-table-column prop="orgName" label="集团/省份" sortable></el-table-column>
          <el-table-column prop="appName" label="应用名称" sortable></el-table-column>
          <el-table-column prop="bizSubTypeValue" label="业务大类" sortable></el-table-column>
          <el-table-column prop="created_time" label="创建时间" sortable width="160">
            <template slot-scope="scope">
              {{
              time_change(scope.row.createTime)
              }}
            </template>
          </el-table-column>
          <el-table-column prop="edit_time" label="修改时间" sortable width="160">
            <template slot-scope="scope">
              {{
              time_change(scope.row.updateTime)
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="$currentRole>2" width="100">
            <template slot-scope="scope">
              <el-button @click="show_form(scope.row, true)" plain size="mini" type="text">编辑</el-button>
              <el-button @click="del_table_sure(scope.row)" plain size="mini" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <!-- 分页控件 -->
      <footer v-if="total_page > table_config.pageSize">
        <el-pagination
          :current-page="table_config.currentPage"
          @size-change="handleSizeChange"
          @current-change="current_change"
          :page-sizes="[5, 10, 30, 50, 100]"
          :page-size="table_config.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_page"
        ></el-pagination>
      </footer>
    </div>
    <!-- 抽屉区域 -->
    <el-drawer title :modal="false" :visible.sync="drawer_bool" :with-header="false">
      <div class="drawer_box">
        <header>
          <span class="til">
            <template v-if="drawer_obj.id">编辑栏目( ID: {{ drawer_obj.bizId }})</template>
            <template v-else>添加栏目</template>
          </span>
          <i @click="drawer_bool = false" class="el-icon-close"></i>
        </header>
        <section>
          <el-form
            :inline-message="true"
            :model="drawer_obj"
            :rules="formRules"
            ref="ruleForm"
            class="sectionForm"
          >
            <el-form-item ref="fromName" prop="name">
              <div class="section_til">
                <i>*</i>
                应用名称 ( 必填 )
              </div>
              <div class="el_com">
                <el-select
                  :disabled="drawer_obj.id?true:false"
                  :size="table_size"
                  filterable
                  v-model="drawer_obj.appId"
                  class="el_inp lang"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in app_arr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="section_til">业务大类</div>
              <div class="el_com">
                <el-select
                  :size="table_size"
                  filterable
                  clearable
                  v-model="drawer_obj.bizSubTypeCode"
                  class="el_inp lang"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bizSubType_arr"
                    :key="item.dicCode"
                    :label="item.dicValue"
                    :value="item.dicCode"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item ref="fromType" prop="name">
              <div class="section_til">
                <i>*</i>栏目名称( 必填 )
              </div>
              <div class="el_com">
                <el-input
                  v-model="drawer_obj.bizName"
                  :size="table_size"
                  class="el_inp"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </el-form-item>

            <el-form-item ref="fromSdk">
              <div class="section_til">描述</div>
              <div class="el_com">
                <el-input
                  v-model="drawer_obj.bizDesc"
                  class="el_inp lang"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </el-form-item>
          </el-form>
        </section>
        <footer>
          <!-- 编辑打开抽屉时，调用的函数 -->
          <template v-if="drawer_obj.id && !drawer_loading">
            <el-button class="btn" @click="edit_biz" size="mini" type="primary">保存</el-button>
          </template>
          <!-- 添加打开抽屉时，调用的函数 -->
          <template v-if="!drawer_obj.id && !drawer_loading">
            <el-button class="btn" @click="add_biz" size="mini" type="primary">添加</el-button>
          </template>
          <template v-if="drawer_loading">
            <el-button class="btn" disabled size="mini" type="primary">递交中</el-button>
          </template>

          <el-button class="btn" @click="drawer_bool = false" size="mini" type="primary" plain>取消</el-button>
        </footer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import application from "@/utils/api/application.js";
export default {
  name: "serviceManage",
  data() {
    let validateName = (rule, value, callback) => {
      if (
        !this.drawer_obj.appId ||
        this.drawer_obj.appId == "" ||
        this.drawer_obj.appId == null
      ) {
        callback(new Error("应用名称不能为空"));
      }
      if (
        !this.drawer_obj.bizName ||
        this.drawer_obj.bizName == "" ||
        this.drawer_obj.bizName == null
      ) {
        callback(new Error("栏目名称不能为空"));
      }
      callback();
    };
    return {
      formRules: {
        name: [{ validator: validateName, trigger: "blur" }]
      }, // 弹框表单验证规则
      app_arr: [
        {
          value: "1001",
          label: "乐ggg平台"
        },
        {
          value: "1002",
          label: "开go平台"
        },
        {
          value: "1003",
          label: "心go平台"
        }
      ], // 应用下拉框
      bizSubType_arr: [], // 业务大类下拉框
      tableData: [],
      table_size: "small",
      table_loading: false,
      total_page: 0, // 表格数据总量
      table_config: {
        appId: [], // 应用名称（id）
        bizName: null, // 栏目名称
        currentPage: 1,
        pageSize: 10
      }, // 表格请求参数大对象
      drawer_loading: false, // 抽屉请求开关
      drawer_obj: {
        id: null,
        appId: null, // 应用名称
        bizSubTypeCode: null, // 业务大类
        bizName: null, // 栏目名称
        bizDesc: null, // 描述
        bizId: null // 栏目id 栏目码
      }, // 抽屉弹窗存储大对象
      drawer_bool: false // 抽屉开关变量
    };
  },
  components: {},
  methods: {
    // 获取业务大类函数
    async bizSubType_arrQuery() {
      let res = await application.dic_list({
        dicType: "2",
        pageSize: 99999,
        currentPage: 1,
        dicValue: "",
        appId: null
      });
      if (res&&res.success) {
        this.bizSubType_arr = res.value.list;
      }
    },
    // 编辑栏目递交
    async edit_biz() {
      this.drawer_loading = true;
      setTimeout(() => {
        if (this.drawer_loading) {
          this.drawer_loading = false;
        }
      }, 6000);
      let res = await application.biz_update(this.drawer_obj);
      setTimeout(() => {
        this.drawer_loading = false;
        if (res&&res.success) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.query();
        } else {
          this.$message.error("修改失败");
        }
        this.drawer_bool = false;
      }, 200);
    },
    // 新增栏目递交
    async add_biz() {
      this.drawer_loading = true;
      setTimeout(() => {
        if (this.drawer_loading) {
          this.drawer_loading = false;
        }
      }, 6000);
      let res = await application.biz_add(this.drawer_obj);
      setTimeout(() => {
        this.drawer_loading = false;
        if (res&&res.success) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.query();
        } else {
          this.$message.error("追加失败");
        }
        this.drawer_bool = false;
      }, 200);
    },
    // 表格删除确认函数
    del_table_sure(obj) {
      this.$confirm("此操作为逻辑删除, 是否继续?", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.del_table(obj);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async del_table(obj) {
      // 判断当前表格是否只剩下一条数据
      let len = this.tableData.length;
      let res = await application.biz_delete({
        id: obj.id
      });
      if (res&&res.success) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        if (len == 1 && this.table_config.currentPage > 1) {
          this.table_config.currentPage--;
        }
        this.query();
      } else {
        this.$message.error("删除失败");
      }
    },
    // 时间戳转换函数
    time_change(time) {
      let date = new Date(time); //获取一个时间对象
      let year = date.getFullYear(); // 获取完整的年份(4位,1970)
      let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      mon = mon < 10 ? "0" + mon : mon;
      let day = date.getDate(); // 获取日(1-31)
      day = day < 10 ? "0" + day : day;
      return year + " - " + mon + " - " + day;
    },
    // 分页数量改变函数
    handleSizeChange(page) {
      this.table_config.pageSize = page;
      this.table_config.currentPage = 1;
      this.query();
    },
    show_form(obj, bool) {
      if (bool) {
        this.drawer_obj = {
          id: obj.id,
          appId: obj.appId, // 应用名称
          bizSubTypeCode: obj.bizSubTypeCode, // 业务大类
          bizName: obj.bizName, // 栏目名称
          bizDesc: obj.bizDesc, // 描述
          bizId: obj.bizId // 栏目id 栏目码
        };
      } else {
        this.drawer_obj = {
          id: null,
          appId: this.app_arr[0] ? this.app_arr[0].value : null, // 应用名称
          bizSubTypeCode: this.bizSubType_arr[0]
            ? this.bizSubType_arr[0].dicCode
            : null, // 业务大类
          bizName: null, // 栏目名称
          bizDesc: null, // 描述
          bizId: null // 栏目id 栏目码
        };
      }
      this.drawer_bool = true;
    },
    // 查询函数
    search() {
      this.table_config.currentPage = 1;
      this.query();
    },
    // 数据请求函数
    async query() {
      this.table_loading = true;
      let _arr = [];
      this.table_config.appId.map(_i => {
        _arr.push(_i[0]);
      });
      console.log(_arr, "选项");
      let sub = {
        appId: _arr, // 应用名称（id）
        bizName: this.table_config.bizName, // 栏目名称
        currentPage: this.table_config.currentPage,
        pageSize: this.table_config.pageSize
      };
      let res = await application.biz_list(sub);
      if (res&&res.success) {
        this.table_loading = false;
        this.total_page = res.value.total;
        this.table_config.currentPage = res.value.currentPage;
        this.table_config.pageSize = res.value.pageSize;
        this.tableData = res.value.list;
      } else {
        this.total_page = 0;
        this.table_config.currentPage = 1;
        this.table_config.pageSize = 10;
        this.tableData = [];
      }
    },
    // 页码切换函数
    current_change(page) {
      this.table_config.currentPage = page;
      this.query();
    }
  },
  async created() {
    // 获取表格数据
    this.query();
    //  获取业务大类数据
    this.bizSubType_arrQuery();

    // 获取应用数据下拉框
    let res_o = await application.app_list({
      mngDeptId: null, // 运营部门
      appName: null, // 应用名称
      currentPage: 1,
      pageSize: 10000
    });
    if (res_o.success) {
      let _arr_arr = [];
      res_o.value.list.map(_i => {
        _arr_arr.push({
          value: _i.appId,
          label: _i.appName
        });
      });
      this.app_arr = _arr_arr;
    } else {
      this.$message.error("应用列表获取失败");
    }
    // 获取业务大类数据
  },
  computed: {}
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
::v-deep .el-form-item__error {
  position: absolute;
  left: 71%;
  bottom: 0.3rem;
}
// 抽屉壳子元素
.drawer_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0 20px 0 10px;
    border-bottom: 1px solid #e4e7ed;
    .til {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: rgba($color: #303133, $alpha: 1);
    }
    i {
      font-size: 16px;
      font-weight: 600;
      transition: all 0.5s ease;
    }
    i:hover {
      transform: rotate(90deg);
      font-size: 20px;
      font-weight: 800 !important;
    }
  }
  section::-webkit-scrollbar {
    display: none;
  }
  section {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    bottom: 66px;
    padding: 0 0 30px;
    overflow-y: scroll;
    .sectionForm {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      .el-form-item {
        width: 100%;
        margin-bottom: 0;
      }
    }
    .section_til {
      width: 100%;
      text-indent: 20px;
      height: 26px;
      line-height: 26px;
      text-align: left;
      color: #909399;
      font-size: 12px;
      i{
        color: red;
        font-size: 16px;
        font-weight: 600;
        margin: 0 .1rem 0 0 ;
      }
    }
    .el_com {
      width: 100%;
      padding: 6px 0 6px 30px;
      min-height: 0.8rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .el_inp {
        width: 70%;
      }
    }
  }
  footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
    border-top: 1px solid #e4e7ed;
    .btn {
      margin: 0 20px;
    }
  }
}
// serviceManage
.serviceManage::-webkit-scrollbar {
  display: none;
}
.serviceManage {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 10px auto 10px;
    padding-bottom: 36px;
    position: relative;
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sel_head {
        width: 290px;
        margin-right: 6px;
        margin-left: 0;
      }
      .sel_inp {
        width: 380px;
        margin-left: 10px;
      }
    }
    footer {
      position: absolute;
      width: 97%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      bottom: 0;
      left: 1%;
    }
    section {
      width: 98%;
      // max-height: 66vh;
      overflow-y: scroll;
      margin: 6px auto;
    }
    section::-webkit-scrollbar {
      width: 0 !important;
    }
    section {
      -ms-overflow-style: none;
    }
    section {
      overflow: -moz-scrollbars-none;
    }
  }
}
</style>
